<template>
  <view class="index">
    <view>
      <van-cell-group>
        <van-field
          :value="carInfo"
          title-width="5.2em"
          label="车源信息"
          placeholder="请选择车源信息"
          border="true"
          readonly="true"
          is-link="true"
          clickable="true"
          label-class="label-font"
          input-class="input-font"
          @tap="selectCar"
        ></van-field>
        <van-field
          :value="form.appearance"
          title-width="5.2em"
          label="外观"
          border="true"
          placeholder="请输入外观颜色"
          label-class="label-font"
          input-class="input-font"
          @change="val => formChange({ appearance: val.detail })"
        />
        <van-field
          :value="form.interior"
          title-width="5.2em"
          label="内饰"
          border="true"
          placeholder="请输入内饰颜色"
          label-class="label-font"
          input-class="input-font"
          @change="val => formChange({ interior: val.detail })"
        />
        <van-field
          :value="form.emission_name"
          title-width="5.2em"
          label="排放标准"
          placeholder="请选择排放标准"
          border="true"
          readonly="true"
          is-link="true"
          label-class="label-font"
          input-class="input-font"
          @tap="showStandard = true"
        ></van-field>
        <van-action-sheet
          :show="showStandard"
          :actions="standardActions"
          cancel-text="取消"
          @cancel="showStandard = false"
          @select="onSelectStandard"
        />
        <van-field
          :value="regionStr"
          title-width="5.2em"
          label="上牌地"
          placeholder="请选择上牌地"
          border="true"
          readonly="true"
          is-link="true"
          label-class="label-font"
          input-class="input-font"
          @tap="showArea = true"
        ></van-field>
        <van-popup :show="showArea" position="bottom" get-container="body">
          <van-area
            title="省市选择"
            value="110000"
            :area-list="areaList"
            :columns-num="2"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-field
          :value="form.look_days_time"
          title-width="5.2em"
          label="寻车有效期"
          placeholder="请选择寻车有效期"
          border="true"
          readonly="true"
          is-link="true"
          label-class="label-font"
          input-class="input-font"
          @tap="showFindTime = true"
        ></van-field>
        <van-popup :show="showFindTime" position="bottom">
          <van-datetime-picker
            type="date"
            :value="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="showFindTime = false"
            @confirm="onConfirmTime"
          />
        </van-popup>
        <van-field
          :value="form.look_type_name"
          title-width="5.2em"
          label="寻车状态"
          placeholder="请选择寻车状态"
          border="true"
          readonly="true"
          is-link="true"
          label-class="label-font"
          input-class="input-font"
          @tap="showFindStatus = true"
        ></van-field>
        <van-action-sheet
          :show="showFindStatus"
          :actions="actions"
          cancel-text="取消"
          @cancel="showFindStatus = false"
          @select="onSelect"
        />
        <van-field
          :value="form.contact_name"
          title-width="5.2em"
          border="true"
          label="联系姓名"
          placeholder="请输入联系姓名"
          label-class="label-font"
          input-class="input-font"
          @change="val => formChange({ contact_name: val.detail })"
        />
        <van-field
          :value="form.contact_mobile"
          title-width="5.2em"
          label="联系方式"
          placeholder="请输入联系方式"
          label-class="label-font"
          input-class="input-font"
          @change="val => formChange({ contact_mobile: val.detail })"
        />
      </van-cell-group>
      <view class="height"></view>
      <van-cell-group>
        <text class="remark">备注（选填）</text>
        <van-field
          :value="form.remark"
          placeholder="请输入车辆描述"
          :border="false"
          type="textarea"
          :multiple="true"
          :autosize="{ minHeight: 100 }"
          label-class="label-font"
          input-class="input-font"
          @change="val => formChange({ remark: val.detail })"
        />
      </van-cell-group>
    </view>
    <view class="fix-btn">
      <van-button
        size="large"
        type="primary"
        block
        color="#006CFF;"
        @click="publish"
      >
        发布
      </van-button>
    </view>
  </view>
</template>

<script>
import request from '@utils/ajax.js'
import { publishFind } from '@requests/business'
import Taro from '@tarojs/taro'
import {
  navigateTo,
  formatter,
  toast,
  goBack,
  getMaxDate,
  getMinDate
} from '@utils/index'

export default {
  name: 'PublishFind',
  data() {
    return {
      carModel: null,
      form: {
        appearance: '',
        interior: '',
        contact_name: this.$store.state.user.userInfo.name,
        contact_mobile: this.$store.state.user.userInfo.mobile.toString(),
        remark: '',
        look_days_time: '',
        look_type: null,
        look_type_name: '',
        emission: '',
        emission_name: '',
        look_days_time: ''
      },
      fileList: [],
      showArea: false,
      areaList: [],
      showFindTime: false,
      showFindStatus: false,
      showStandard: false,
      currentDate: new Date().getTime(),
      minDate: getMinDate().getTime(),
      maxDate: getMaxDate().getTime(),
      regionStr: ''
    }
  },
  components: {},
  computed: {
    carInfo() {
      if (!this.carModel) {
        return ''
      }
      const { car_brand_name, car_series_name, car_model_name } = this.carModel
      return `${car_brand_name} ${car_series_name} ${car_model_name}`
    },
    actions() {
      return this.$store.state.dict.look_car_type.map(i => {
        return {
          ...i,
          color: '#006CFF'
        }
      })
    },
    standardActions() {
      return this.$store.state.dict.look_car_emission.map(i => {
        return {
          ...i,
          color: '#006CFF'
        }
      })
    }
  },
  created() {
    this.getAreas()
    Taro.eventCenter.on('selectFindCar', data => {
      this.carModel = data
    })
  },
  methods: {
    formChange(data) {
      this.form = { ...this.form, ...data }
    },
    selectCar() {
      navigateTo('business/car-lib/index', {
        event: 'selectFindCar'
      })
    },
    getAreas() {
      request({
        url: 'common/region'
      })
        .then(res => {
          this.areaList = this.formatList(res.result)
        })
        .catch(e => e)
    },
    formatList(list) {
      let areaList = { province_list: {}, city_list: {}, county_list: {} }
      Array.isArray(list) &&
        list.forEach(province => {
          areaList.province_list[province.value] = province.label
          if (Array.isArray(province.children) && province.children.length) {
            province.children.forEach(city => {
              areaList.city_list[city.value] = city.label
              if (Array.isArray(city.children) && city.children.length) {
                city.children.forEach(county => {
                  areaList.county_list[county.value] = county.label
                })
              }
            })
          }
        })
      return areaList
    },
    onConfirm(e) {
      let values = e.detail.values
      this.regionStr = values.map(item => item.name).join('/')
      this.region = {
        province_code: values[0].code,
        province_name: values[0].name,
        city_name: values[1].name,
        city_code: values[1].code,
        area_name: '',
        area_code: ''
      }
      this.showArea = false
    },
    onSelect(e) {
      this.form.look_type_name = e.detail.name
      this.form.look_type = e.detail.value
      this.showFindStatus = false
    },
    onSelectStandard(e) {
      this.form.emission = e.detail.value
      this.form.emission_name = e.detail.name
      this.showStandard = false
    },
    publish() {
      publishFind({
        ...this.form,
        ...this.carModel,
        ...this.region
      }).then(res => {
        toast.success('发布成功').then(() => {
          Taro.eventCenter.trigger('publish')
          goBack()
        })
      })
    },
    onConfirmTime(e) {
      this.form.look_days_time = formatter(e.detail)
      this.showFindTime = false
    }
  }
}
</script>

<style>
.index {
  padding-bottom: 120px;
}
.label-font {
  font-size: 28rpx !important;
}
.input-font {
  font-size: 28rpx !important;
}
.fix-btn {
  padding: 3%;
  width: 94%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.remark {
  display: block;
  padding: 0 1rem;
  font-size: 0.865rem;
  color: #323232;
  height: 70rpx;
  line-height: 70rpx;
}
.height {
  height: 0.8rem;
  background-color: #f8f8f8;
}
.index .van-field__label {
  color: #323232;
}
</style>
